<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理界面</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            display: flex;
            align-items: center;
            padding: 10px;
            border: 1px solid #ccc;
            margin-bottom: 5px;
            cursor: pointer;
        }

        li div {
            flex-grow: 1;
            padding-left: 10px;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
        }

        .modal-header, .modal-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
        }

        .modal-header {
            border-bottom: 1px solid #ccc;
        }

        .modal-footer {
            border-top: 1px solid #ccc;
        }

        .modal-ID {
            font-size: 1.5em;
            font-weight: bold;
        }

        .modal-body {
            padding: 10px;
        }

    </style>
</head>
<body>
<form action="/user/reToMainManager">
    <input type="submit" value="管理员主界面">
</form>
<ul id="infoList">
    <!-- 信息待定，这里可以动态添加列表项 -->
</ul>

<div id="myModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-ID" id="modalID"></div>
        </div>
        <div class="modal-body">
            <div id="modalName"></div>
        </div>
        <div class="modal-footer">
            <div class="modal-button" id="withdrawButton">删除</div>
            <div class="modal-button" id="closeButton">退出</div>
        </div>
    </div>
</div>

<script>
    let infoItems = [];
    var id_html_tmp = -1;
    const apiUrl = 'http://localhost:8080/user';


    window.onload = function() {
        getInfoItems();
    };
    // 页面加载时从后端获取infoItems
    function getInfoItems() {
        fetch(apiUrl + '/getUserInfo')
            .then(response => response.json())
            .then(data => {
                // 通过fetch获取后端JSON数据并将数据传递给JavaScript中的infoItems
                infoItems = data;
                // 接下来根据已经获取的JSON数据，解析并显示与页面
                updateDisplay();
            })
            .catch(error => console.error('Error loading infoItems:', error));
    }

    // 更新页面显示/加载页面
    function updateDisplay() {

        // 动态生成列表项
        const list = document.getElementById('infoList');
        // 通过循环的方式，逐一添加ul的li元素
        infoItems.forEach(items => {
            const li = document.createElement('li');
            const titleDiv = document.createElement('div');

            titleDiv.textContent = items.name;
            li.appendChild(titleDiv);

            // 设置该li的点击事件
            li.addEventListener('click', () => {
                // 事件内容是，打开对应的显示对话框

                showModal({
                    id: items.id,
                    name: items.name
                });
            });

            list.appendChild(li);
            hideAddModal();
        });
    }

    /*======================*/

    // 显示模态对话框
    function showModal(item) {
        const modal = document.getElementById('myModal');
        const modalID = document.getElementById('modalID');
        const modalName = document.getElementById('modalName');

        id_html_tmp = item.id;

        modalID.textContent = item.id;
        modalName.textContent = item.name;

        modal.style.display = 'flex';
    }

    // 隐藏模态对话框
    function hideModal() {
        const modal = document.getElementById('myModal');
        modal.style.display = 'none';

    }

    // 撤回按钮功能（这里只是一个示例，具体实现取决于实际需求）
    document.getElementById('withdrawButton').addEventListener('click', () => {
        fetch(apiUrl + '/deleteUser', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({id: id_html_tmp}),
        }).catch(error => console.error('Error loading infoItems:', error));

        id_html_tmp = -1;
        hideModal();
    });

    // 退出按钮功能
    document.getElementById('closeButton').addEventListener('click', () => {
        id_html_tmp = -1;
        hideModal
    });
</script>
</body>
</html>